<template>
  <div class="tree">
    <div class="search_box">
      <div class="name">合同名称</div>
      <el-input class="ipt" type="text"
                placeholder="输入搜索关键字"
                v-model="searchKey"
                @select="onSearch"
                @change="onSearch"
      ><img src="@/assets/search.png" slot="suffix" @click="onSearch" /></el-input>
    </div>
    <el-tree
        class="scroll_bar"
        :style="{height: treeHeight}"
        :data="treeData"
        :props="defaultProps"
        @node-click="handleNodeClick"
    >
      <template slot-scope="{ node }">
        <span :title="node.label">{{node.label}}</span>
      </template>
    </el-tree>
  </div>
</template>

<script>
import { mapState } from 'vuex'
// import { getEquipmentCategory } from '@/api/base/equip'
import { getContractListData } from '@/api/base/contract'
import { debounce, getUuid } from '@/utils/common'
export default {
    data () {
        return {
            formData: {
                'billId': '',
                'name': '',
                'state': 0
            },
            newparams: {
                key: '',
                kvId: getUuid(),
                parentId: '',
                isEnable: false,
            },
            searchKey: '',
            treeData: [],
            defaultProps: {
                children: 'children',
                isLeaf: 'isLeaf',
                label: 'name'
            },
            screenWidth: 0,
            screenHeight: 0,
            params: {
                'categoryId': '00000',
                'keyword': ''
            }
        }
    },
    computed: {
        ...mapState(['userInfo']),
        treeHeight () {
            return (this.screenHeight - 125) + 'px'
        },
    },
    created () {
        this.getContractData()
    },
    mounted () {
    // 获取屏幕宽高
        this.getScreenInfo()
        window.addEventListener('resize', debounce(this.getScreenInfo))
    },
    methods: {
    // 获取左边列表的合同tree
        getContractData () {
            getContractListData(this.newparams).then(res =>{
                this.treeData = res
            })
        },
        //搜索筛选数据
        async queryLeftTableData () {
            const resData = this.treeData.filter(item => {
                return item.name.includes(this.searchKey)
            })
            this.treeData = resData
        },
        handleNodeClick (row) {
            console.log('row', row)
            this.$emit('select', row)
        },
        onSearch (e) {
            if(e === '') {
                this.getContractData()
            }else{
                let searchKey = e
                if (typeof e === 'object') {
                    searchKey = this.searchKey
                }
                this.formData.name = searchKey
                this.queryLeftTableData()
            }
        },
        getScreenInfo () {
            let screenWidth = document.documentElement.clientWidth || document.body.clientWidth
            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight
            this.screenWidth = screenWidth
            this.screenHeight = screenHeight
        },
    }
}
</script>

<style lang="scss" scoped>
.tree{
  .search_box {
    position: fixed; left: 11px; top: 0; z-index: 2; padding: 10px 0 0; width: 246px; flex-direction: column; background: #fff;
  }
  .name {
    margin: 0 0 15px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-weight: 700;
    background-color: rgb(224, 231, 249);
  }
  .el-tree{
    overflow-y: auto;
  }
  ::v-deep.el-tree-node>.el-tree-node__children {
    width: 800px;
    &::-webkit-scrollbar {
      height: 8px;
    }
    &:hover{
      &::-webkit-scrollbar-thumb {
        background: rgba(204, 204, 204, 0.8);
        &:hover{
          background: rgba(204, 204, 204, 1);
        }
      }
    }
  }
}
</style>